<template>
	<view class="content">
		<view class="section_item" v-for="(item,index) in sectionlist" :key="index">
			<view class="section_top">
				<view class="top_name">{{item.section_name}}</view>
				<!-- <navigator hover-class="none" class="top_btn" :url="'packageChapter?package_id='+package_id+'&section_id='+item.unid" v-if="type!=1 && !section_id">查看资源</navigator>
				<navigator hover-class="none" class="top_btn" :url="'packageChapter?package_id='+package_id+'&section_id='+item.unid + '&schoolPackSection=' + section_id"  v-if="type!=1 && section_id">选择资源</navigator> -->
				<view class="top_btn" @click="gotoDetail(item,index)" v-if="package_log_id">查看详情</view>
				<view class="top_btn" @click="gotoDetail(item,index)" :class="[isSee==2&&index+1>num?'isSee':'']" v-else>查看资源</view>
			</view>
			<view class="section_bottom">
				<view>完成时间：{{item.update_time}}</view>
				<view>参考课时：{{item.study_time}}课时</view>
			</view>
		</view>
		<view class="noSearchBox" v-if="sectionlist.length == 0">
			<image src="../../static/image/lesson-no-find-order.png" mode=""></image>
			<view class="noSearchText">暂无资源,快去添加吧~</view>
		</view>
		<uni-load-more v-if="sectionlist.length > 6" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				sectionlist: [],
				package_id: '',
				section_id: '',
				package_log_id:'',
				isSee:'',
				num:''
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getsection();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getsection();
			}, 500);
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: './addSection'
			})
		},
		onLoad(e) {
			this.package_id = e.package_id;
			this.section_id = e.section_id
			this.package_log_id=e.package_log_id;
			this.num=e.num;
			this.isSee=e.isSee;
			console.log(this.num);
			console.log(this.isSee);
			this.getsection();
		},
		methods: {
			// 查看章节详情
			gotoDetail(item,index) {
				console.log(item,"===");
				if(this.isSee==2&&this.num<=index){
					uni.showToast({
						title: '请购买后再继续查看！',
						icon:'none'
					});
					return;
				}
				//查看资源
				var url='./packageChapter?package_id='+this.package_id+ '&section_id=' + item.unid;
				
				//查看学生练习记录
				if(this.package_log_id){
					url=url+'&package_log_id='+this.package_log_id
				}
				
				uni.navigateTo({
					url:url
				});
			
			},
			getsection: function() {
				this.$papi.apiPost('moblie/packageSection/infos', {
					'package_id': this.package_id,
					'page': this.page,
					'limit': 8
				}).then(res => {
					if (res.data.code == 200) {
						var lists = res.data.data.list;
						for (var i = 0; i < lists.length; i++) {
							lists[i].update_time = lists[i].update_time.substring(0, 10);
						}
						this.sectionlist = this.reload ? lists : this.sectionlist.concat(lists);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.sectionlist = [];
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						} else {
							this.status = "noMore";
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: absolute;
		background-color: rgba(250, 250, 250, 1);
		width: 100%;
		min-height: 100%;
	}
	.isSee{
		background: rgba(200,200,200,1) !important;
	}
	.section_item {
		width: 92%;
		margin: auto;
		margin-top: 20upx;
		border-radius: 20upx;
		background-color: #FFFFFF;
		padding-top: 20upx;

		.section_top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: auto;
			height: 80upx;
			align-items: center;

			.top_name {
				font-size: 34upx;
				color: #333333;
				margin-left: 20upx;
			}

			.top_btn {
				background: #FF9900;
				border-radius: 25upx;
				color: #ffffff;
				height: 52upx;
				width: 160upx;
				text-align: center;
				line-height: 52upx;
				margin-right: 20upx;
			}
		}

		.section_bottom {
			width: 100%;
			height: 60upx;
			margin: auto;
			padding-bottom: 10upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			view {
				margin-left: 25upx;
				color: #999999;
				font-size: 28upx;
			}
		}
	}

	.noSearchBox {
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 400upx;
			height: 300upx;
		}

		.noSearchText {
			font-size: 38upx;
			color: #999999;
			margin-top: 60upx;
		}
	}
</style>
